﻿@using System.Web.Script.Serialization
@{
    ViewBag.Title = "Create";
    Layout = "~/views/shared/_AdminLayout.cshtml";
}

<h4>@T("")</h4>





<div>
    <div>
        <span>add new picture</span> 
    </div>
    <div>
        <img src="" id="demoPic" style="width:100px" data-bind="attr:{src:PictureUrl}"/>
    </div>
    <div>
        <ul id="manualUploadModeExample" class="unstyled"></ul>
    </div>
    <div>
        <input type="text" data-bind="value:DisplayOrder"/>
    </div>

    <div>
        <input type="button" value="Add Product Picture" data-bind="click:$root.AddProductPicture"/>
    </div>
</div>

@{
    
 var model = ViewBag.Model;

    var jsonStr = new HtmlString(new JavaScriptSerializer().Serialize(model));
}

    @Styles.Render("~/content/fineuploader/fineuploader-3.5.0.css")
    @Scripts.Render("~/content/fineuploader/fineuploader-3.5.0.js")
    @Scripts.Render("~/content/fineuploader/iframe.xss.response-3.5.0.js")



@section scripts{
    
    <script>
        var init = @jsonStr;

        function ProductPictureModel() {
            var self = this;
            self.ProductId  = ko.observable(init.ProductId);
            self.PictureId = ko.observable(init.PictureId);
            self.PictureUrl= ko.observable(init.PictureUrl);
            self.DisplayOrder= ko.observable(init.DisplayOrder);


            
            self.AddProductPicture = function() {
                $.ajax({
                    url: "/api/ProductPictureApi/InsertProductPicture",
                    type: 'post',
                    data: ko.toJSON(self),
                    contentType: 'application/json',
                    success: function (result) {

                        if (result.Status == "0") {
                            alert("保存成功");
                            location.href = "/admin/Product/Edit?productId=" + self.ProductId();
                        }
                        else {
                            alert("保存失败：" + result.Msg);
                        }
                    }
                });
            };
        }

        $(document).ready(function() {

            var errorHandler = function(event, id, fileName, reason) {
                qq.log("id: " + id + ", fileName: " + fileName + ", reason: " + reason);
            };


            var uploader2 = new qq.FineUploader({
                element: $('#manualUploadModeExample')[0],
                autoUpload: true,
                uploadButtonText: "Select Files",
                request: {
                    endpoint: "/FineUploader/UploadFile",
                    params: { "extraParam1": "true", "picSize": "100" }
                },
                callbacks: {
                    onError: errorHandler,
                    onComplete: function(id, fileName, responseJSON) {
                        if (responseJSON.success) {
                            vm.PictureId(responseJSON.OriginalPictureId);
                            vm.PictureUrl(responseJSON.NewPictureUrl);
                        }
                    }
                }
            });
        });
        var vm = new ProductPictureModel();
        ko.applyBindings(vm);


    </script>
}